.bottom_bar{
  font-size: 1rem;
  --max-w:75%;
  /* --max-h:10vh; */
  --svg-color: black;
  --svg-wh:40px;
  --bar-bg-color: rgb(245, 245, 245,.3);
  --bar-a-color:  black;
  --icon-wh:32px;
}
.bottom_bar a{
  text-decoration: none;
  color: var(--bar-a-color);
}
.bottom_bar {
  cursor: default;

  padding: 2% 0;
  /* max-width: var(--maxw); */
  /* position: fixed; */
  bottom: 0;
  background: var(--bar-bg-color)
}

.bottom_bar .bottom-container{
  margin: auto;
  max-width: var(--max-w);
  display: flex;
  justify-content: space-between;
  /* padding: 1%; */
}
.bottom_bar button{
  width: var(--svg-wh);
  height: var(--svg-wh);
  color: var(--svg-color);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: .3s;
  position: relative;
}
.bottom_bar button[data-icon="wechat"]:hover{
  --svg-color: #09B83E;
}
.bottom_bar button[data-icon="weibo"]:hover{
  --svg-color: #DF2029;
}
.bottom_bar button[data-icon="youtube"]:hover{
  --svg-color: #CD201F;
}
.bottom_bar button[data-icon="facebook"]:hover{
  --svg-color: #1877F2;
}
.bottom_bar .icon{
  width: var(--icon-wh);
  height: var(--icon-wh);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.bottom_bar .right-box{
  height: var(--svg-wh);
  line-height: var(--svg-wh);
}
.bottom_bar .right-box span{
  position: relative;
}
.bottom_bar .right-box span::before{
  content: attr(data-text);
  color: transparent;
  position: absolute;
  font-size: 16px;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: blue;
  transition: .5s;
}
.bottom_bar .right-box span:hover::before{
  width: 100%;
}